<template>
  <div>
    <header>
      <van-nav-bar class="main_header notice_header" :title="title">
        <template #left>
          <span @click="goBack">返回</span>
        </template>
      </van-nav-bar>
    </header>
    <div style="position:relative;overflow:hidden;">
      <van-tabs v-model="activeName" class="tabstyle" @change="getEntryData" @click="changeTab()">
        <van-tab v-for="(item, index) in status" :key="item.code" :title="item.value" :name="item.code">
          <signUp :ref="'signUp' + index" :status-code="statusCode" />
        </van-tab>
      </van-tabs>
      <div class="search">
        <van-icon name="search" size="30" color="#1989fa" @click="isShow = true" />
        <van-overlay :show="isShow" :custom-style="popStyle">
          <div class="wrapper" @click="closeSearch()">
            <div class="block" @click.stop>
              <van-cell-group>
                <van-field v-model="value" placeholder="输入关键词查询">
                  <template #right-icon><van-icon name="search" size="30" color="#1989fa" /></template>
                </van-field>
              </van-cell-group>
            </div>
          </div>
        </van-overlay>
      </div>
    </div>
  </div>
</template>

<script>
import signUp from './signUp.vue';
import { mapState, mapActions } from 'vuex';
export default {
  components: {
    signUp
  },
  data() {
    return {
      title: '报项中心',
      status: [],
      activeName: '',
      statusCode: '',
      gameId: '',
      isShow: false,
      value: '',
      change: false,
      popStyle: {
        background: 'rgba(255, 255, 255, 0.8)',
        marginTop: '50px'
      }
    };
  },
  computed: {
    ...mapState({
      dict: state => state.dict.dict
    })
  },
  watch: {
    value(val) {
      this.change = true;
    }
  },
  created() {
    this.gameId = this.$route.params.id;
    this.getDict().then(res => {
      this.status = res.competitionStatus.filter((item) => {
        return item.code !== 'Entry Ended' && item.code !== 'Scheduled';
      });
      this.status.unshift({
        code: '',
        value: '全部'
      });
      this.getEntryData();
    });
  },
  methods: {
    ...mapActions({ getDict: 'dict/getDict' }),
    getEntryData() {
      this.statusCode = this.activeName;
    },
    changeTab() {
      if (this.$refs.signUp0 && this.$refs.signUp1 && this.$refs.signUp2 && this.$refs.signUp3) {
        if (this.activeName === this.status[0].code) {
          this.$refs.signUp0[0].loading = false;
          this.$refs.signUp0[0].finished = true;
        } else if (this.activeName === this.status[1].code) {
          this.$refs.signUp1[0].loading = false;
          this.$refs.signUp1[0].finished = true;
        } else if (this.activeName === this.status[2].code) {
          this.$refs.signUp2[0].loading = false;
          this.$refs.signUp2[0].finished = true;
        } else if (this.activeName === this.status[3].code) {
          this.$refs.signUp3[0].loading = false;
          this.$refs.signUp3[0].finished = true;
        }
      } else {
        if (this.$refs.signUp0) {
          this.$refs.signUp0[0].loading = false;
          this.$refs.signUp0[0].finished = true;
        }
        if (this.$refs.signUp1) {
          this.$refs.signUp1[0].loading = false;
          this.$refs.signUp1[0].finished = true;
        }
        if (this.$refs.signUp2) {
          this.$refs.signUp2[0].loading = false;
          this.$refs.signUp2[0].finished = true;
        }
        if (this.$refs.signUp3) {
          this.$refs.signUp3[0].loading = false;
          this.$refs.signUp3[0].finished = true;
        }
      }
    },
    closeSearch() {
      var valueCopy = this.value;
      if (this.activeName === this.status[0].code && this.change === true) {
        this.$refs.signUp0[0].refreshing = true;
        this.$refs.signUp0[0].getMessageList(valueCopy);
      } else if (this.activeName === this.status[1].code && this.change === true) {
        this.$refs.signUp1[0].refreshing = true;
        this.$refs.signUp1[0].getMessageList(valueCopy);
      } else if (this.activeName === this.status[2].code && this.change === true) {
        this.$refs.signUp2[0].refreshing = true;
        this.$refs.signUp2[0].getMessageList(valueCopy);
      } else if (this.activeName === this.status[3].code && this.change === true) {
        this.$refs.signUp3[0].refreshing = true;
        this.$refs.signUp3[0].getMessageList(valueCopy);
      }
      this.isShow = false;
      this.value = '';
      this.change = false;
    },
    goBack() {
      this.$router.push({
        path: `/myCenter${this.gameId && '/' + this.gameId || ''}/`
      });
    }
  }
};
</script>
<style scoped>
.tabstyle /deep/ .van-tabs__wrap {
  width: 90%;
}
.search {
  position: absolute;
  top: 4px;
  right: 10px;
}
.wrapper {
  display: flex;
  /* align-items: center; */
  justify-content: center;
  height: 100%;
}
.block {
  width: 94%;
  height: 46px;
  border-radius: 10px;
  border: 1px solid #1989fa;
  overflow: hidden;
}
</style>
